import React from "react";
import sty from "./sty.module.css";
import { memo } from "react";
import { useDispatch, shallowEqual } from "react-redux";
import { useSelector } from "react-redux";
import { useMemo } from "react";
import Scroll from "../../baseUI/scroll";
import Slider from "./child/slider/index.jsx";
import List from "./child/list/index.jsx";
import { useEffect } from "react";
import { getBanner, getRecommend } from "./store/actionCreators";
import { renderRoutes } from "react-router-config";
const Recommend = (props) => {
  const { route } = props;
  const dispatch = useDispatch();
  const { banners, recommendList } = useSelector(
    (state) => ({
      banners: state.getIn(["recommend", "banners"]),
      recommendList: state.getIn(["recommend", "recommendList"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getBanner());
    dispatch(getRecommend());
  }, [dispatch]);

  const bList = useMemo(() => banners, [banners]);
  const rList = useMemo(() => recommendList, [recommendList]);
  console.log("recommed");

  return (
    <div className={sty.root}>
      <Scroll>
        <div>
          <Slider banners={bList} />
          <List list={rList} />
        </div>
      </Scroll>
      {renderRoutes(route.children)}
    </div>
  );
};
export default memo(Recommend);
